/**
 * 创建应用
 */
var App = function() {
    var listView;
    var searchIpt = $('#search-ipt');
    //
    return {
        /**
         * 依赖组件
         */
        requires : [
            'Fw.ListView'
        ],
        /**
         * 初始化
         * 应用入口
         */
        init : function(require) {
            //定义列表
            listView = new Fw.ListView({
                //列表渲染位置
                contentEl : 'table',
                //数据请求对象
                ajax : {
                    //数据源（自定以URL）
                    service: 'demo1Service',
                    queryMethod: 'query',//默认为query，方法名称必须是query开头
                    insertMethod: 'insert',
                    deleteMethod: 'delete',
                    //分页参数
                    pageSize: 10,
                    //定义监听事件（实例化前定义）
                    listeners: {
                        'insert': this.onAdd,
                        'delete': this.onDelete,
                        'update': this.onUpdate
                    },
                    //数据挡板（默认false）
                    // staticData: true,
                    //显示加载进度
                    maskEl: $('body')
                },
                //行选中样式（默认null）
                //selectedItemCls: 'info',//自定义行选中样式
                //是否显示行号（默认显示）
                rowNumber: true,
                //数据行HTML展现模版
                itemTpl : [
                    '<td width="20%">',
                        '<a>${item.name}</a>',
                    '</td>',
                    '<td width="20%">${item.type}</td>',
                    '<td width="30%">',
                        '<div title="${item.remark}" class="remark-text-overflow">${item.remark}</div>',
                    '</td>',
                    '<td align="center" width="10%">${item.lastModiDate|fmtDate,"yyyy-MM-dd"}</td>',
                    '<td align="center" width="15%" >',
                        '<button type="button" class="btn btn-primary btn-xs x-modi">修改</button>&nbsp;',
                        '<button type="button" class="btn btn-danger btn-xs x-delete">删除</button>',
                    '</td>'
                ]
            });
            //初始化事件
            this.initEvents();
            //加载数据
            listView.loadData();
        },
        /**
         * 初始化事件
         */
        initEvents: function(){
            //点击body时触发
            $('body').on('click', Fw.bind(this.onClick, this));
            //选中记录时触发
            listView.on('itemclick', this.onSelect, this);
            //查询数据前触发
            listView.ajax.on('beforequery', this.onBeforeQuery, this);
            //查询数据后触发
            listView.ajax.on('query', this.onQuery, this);
            //查询输入框会车时触发
            searchIpt.on('keydown', Fw.bind(this.doSearch, this));
        },
        /**
         * 点击body时触发
         */
        onClick: function(e){
            var el = $(e.target);
            //点击删除按钮时
            if(el.hasClass('x-delete')){
                this.doDelete();
            }
            //点击编辑按钮时
            else if(el.hasClass('x-modi')){
                this.doModi();
            }
            //点击新增按钮时
            else if(el.hasClass('x-add')){
                this.doAdd();
            }
            //点击查询按钮时
            else if(el.hasClass('x-search')){
                this.doSearch();
            }
        },
        /**
         * 选中记录时触发
         */
        onSelect: function(record, index, item, e, cmp) {
            this.record = record;
        },
        /**
         * 查询数据前触发
         * @param {Object} Ajax对象
         * @param {Object} 请求报文
         * @param {String} 请求路径
         */
        onBeforeQuery: function(ajax, message, url) {
            //查询前，关闭Window
            Fw.Window.close();
            //return false; //则不加载
        },
        /**
         * 查询数据后触发
         * @param {Object} Ajax对象
         * @param {Object} 响应数据（result[Fw.Ajax.rootProperty]部分）
         * @param {Object} 响应数据（全部）
         */
        onQuery: function(ajax, data, result) {
            //初始化工具提示
            if(!Fw.isTouch){
                listView.tbody.find('[title]').tooltip({
                    container: 'body',
                    trigger: 'hover',
                    placement: 'right',
                    template: [
                        '<div class="tooltip" role="tooltip">',
                            '<div class="tooltip-arrow"></div>',
                            '<div class="tooltip-inner" style="text-align: left;"></div>',
                        '</div>'
                    ].join('')
                });
            }
        },
        /**
         * 执行查询
         */
        doSearch: function(e){
            //如果不是由keydown事件触发，或者是回车，则执行查询
            if(!e || (e.keyCode || e.which) === 13){
                //设置查询条件
                var value = searchIpt.val();
                //
                if(Fw.isEmpty(value)){
                    listView.ajax.clearParams();
                }
                else{
                    listView.ajax.setParams('name', value);
                }
                //刷新表格
                listView.loadData();
            }
        },
        /**
         * 执行删除
         */
        doDelete: function(){
            Fw.Msg.quest('您选择的记录删除后将无法恢复，确认删除？', function(type, btn, win){
                if(type === 'yes'){
                    //提交删除请求
                    listView.ajax.del(this.record['id']);
                }
            }, this);
        },
        /**
         * 删除成功后触发
         */
        onDelete: function(ajax, data, result){
            Fw.Msg.info('您选择的记录删除成功！', function(){
                listView.loadData();
            });
        },
        /**
         * 执行新增
         */
        doAdd: function(){
            //弹出表单
            Fw.Window.record = null;
            Fw.Window.show({
                title: '新增记录',
                closable: true,
                url: '/demo/crud/form.html',
                buttons: [
                    {text: '保存', cls: 'btn-primary', dismiss: false, handler: this.doSave, scope: this},//dismiss：点击立刻关闭
                    {text: '取消', cls: 'btn-default'}
                ]
            });
        },
        /**
         * 新增成功后触发
         */
        onAdd: function(ajax, data, result){
            Fw.Msg.info('您新增的记录已经保存成功！', function(){
                listView.loadData();
            });
        },
        /**
         * 执行编辑
         */
        doModi: function(){
            //弹出表单
            Fw.Window.record = this.record;
            Fw.Window.show({
                title: '编辑记录',
                closable: false,
                url: '/demo/crud/form.html',
                buttons: [
                    {text: '保存', cls: 'btn-primary', dismiss: false, handler: this.doSave, scope: this},
                    {text: '取消', cls: 'btn-default'}
                ]
            });
        },
        /**
         * 修改成功后触发
         */
        onUpdate: function(ajax, data, result){
            Fw.Msg.info('您修改的记录已经保存成功！', function(){
                listView.loadData();
            });
        },
        /**
         * 执行保存
         */
        doSave: function(btn, win, content, form){
            //表单输入值是否合法
            if(form.isValid()){
                var values = form.getValues();
                var isAddNew = Fw.isEmpty(values['id']);
                //新增
                if(isAddNew){
                    //提交新增请求
                    listView.ajax.insert(values);
                }
                //修改
                else{
                    //提交保存请求
                    listView.ajax.update(values);
                }
            }
        }
    };
}();

/**
 * 页面加载完毕后，初始化应用
 */
Fw.onReady(App);
